<template>
  <div class="detail">
    <!-- 详情页顶部导航栏 -->
    <detailNavBar class="detail-nav" @detailNavClick="detailNavClick" ref="nav"/>
    <!-- BScroll插件 -->
    <Scroll class="content" ref="scroll" @scroll="scrollPostitionY" :probeType="3">
      <!-- 详情页轮播图 -->
      <DetailSwiper :topImages="topImages"/>
      <!-- 详情页商品信息 -->
      <DetailGoodInfo :goodDataObj="goodDataObj"/>
      <!-- 详情页店铺信息 -->
      <DetailStoreInfo :storeInfo="goodStorer"/>
      <!-- 详情页商品信息（多为图片） -->
      <DetailGoodDataInfo :detailInfo="detailInfo" @imgLoaded="imgLoaded"/>
      <!-- 详情页的商品尺码 -->
      <DetailParams :goodParams="getParamsData" ref="params"/>
      <!-- 详情页评论 -->
      <DetailComment :comment="comment" ref="comment"/>
      <!-- 推荐商品 -->
      <GoodsList :goodsList="recommend" ref="recommend"/>
    </Scroll>
    <!-- 返回顶部（mixin中） -->
    <GoBack @click.native="goBackClick" v-show="isGoBackShow"/>
    <!-- 详情页底部收藏购物侧区域 -->
    <DetailBottomBar @addClick="addClick"/>

     toast
  </div>
</template>

<script>
//公共组件
import Scroll from 'components/common/scroll/Scroll';

//业务逻辑组件
import DetailNavBar from './detailChild/DetailNavBar';
  import DetailSwiper from './detailChild/DetailSwiper';
  import DetailGoodInfo from './detailChild/DetailGoodInfo';
  import DetailStoreInfo from './detailChild/DetailStoreInfo';
  import DetailGoodDataInfo from './detailChild/DetailGoodDataInfo';
  import DetailParams from './detailChild/DetailParams';
  import DetailComment from './detailChild/DetailComment';
  import GoodsList from 'components/context/goods/GoodsList';
import DetailBottomBar from './detailChild/DetailBottomBar';


//网络请求
import { getDetail,
        getDetailData,
        getGoodStoreData,
        getParamsData,
        getRecommend,
        goodCart } from 'network/detail';

//公共方法
import { debounce } from 'common/utils.js';
import { imgItemListerMixin, backTop } from 'common/mixin';

//vuex 方法映射
import { mapActions } from 'vuex';


export default {
  name: 'Detail',
  data() {
    return {
      id: null,
      topImages: [],
      data: null,
      goodDataObj: {},
      goodStorer: {},
      detailInfo: {},
      getParamsData: null,
      comment: null,
      recommend: [],
      titleOffsetYs: [],// 对应标题距离顶部的距离
      imgLoadedGetY: null, // 获取图片高度防抖函数
      getCurrentIndex: 0 // 获取当前详情页导航栏计数器 0-商品 1-参数...
    }
  },
  mixins: [imgItemListerMixin, backTop],
  components: {
    DetailNavBar,
    DetailSwiper,
    DetailGoodInfo,
    DetailStoreInfo,
    Scroll,
    DetailGoodDataInfo,
    DetailParams,
    DetailComment,
    GoodsList,
    DetailBottomBar,
  },
  created() {
    // 获取点击传过来的id
    this.id = this.$route.params.id;

    //发送网络请求
    getDetail(this.id).then(res => {
      this.data = res.result;
      this.topImages = this.data.itemInfo.topImages; // 请求后台获取轮播图图片
      // 将数据发送给DetailGoodInfo组件
      
      // 将网络请求的数据封装成对象。商品信息
      const columns = this.data.columns; 
      const itemInfo = this.data.itemInfo;
      const services = this.data.shopInfo.services;
      this.goodDataObj = new getDetailData(columns, itemInfo, services);

      //将网络请求的接口数据封装成对象。商家信息
      const shopInfo = this.data.shopInfo;
      this.goodStorer = new getGoodStoreData(shopInfo);

      // 将网络请求接口数据保存在变量里。 商品详细数据图片
      this.detailInfo = this.data.detailInfo

      // 将网络请求接口数据保存在变量里。 商品尺码数据
      const info = this.data.itemParams.info;
      const rule = this.data.itemParams.rule;
      this.getParamsData = new getParamsData(info, rule);

      // 将网络请求接口数据保存在变量里。 评论数据
      this.comment = this.data.rate;


      

     
    }).catch(err => {
      console.log(err);
    });

    //将网络请求接口数据保存在变量里。 推荐商品展示数据
    getRecommend().then(res => {
      this.recommend = res.data.list;
      
        
      
    }).catch(err => {
      console.log(err);
    });

    // 获取图片加载完之后刷新高度防抖操作
    this.imgLoadedGetY = debounce(() => {
      this.titleOffsetYs = []; // 执行1次以上就重新赋值
      const navHeight = this.$refs.nav.$el.offsetHeight;
      this.titleOffsetYs.push(0, this.$refs.params.$el.offsetTop - navHeight);
      this.titleOffsetYs.push(this.$refs.comment.$el.offsetTop - navHeight);
      this.$refs.recommend.$el.offsetTop && this.titleOffsetYs.push(this.$refs.recommend.$el.offsetTop - navHeight);
      this.titleOffsetYs.push(Number.MAX_SAFE_INTEGER);
      
    }, 100)

  },// created结束
  mounted() {// [minxin]中
    
    
    
  },
  methods: {
    ...mapActions(['addCart']), // vuex的action内容映射
    imgLoaded() {// 详情页图片加载完成调用,用防抖方法减轻服务器压力
      this.imgItemLister();// 图片加载完成即调用防抖方法

      this.imgLoadedGetY();// 获取图片加载完之后的高度
      
    },
    detailNavClick(index) {// 点击tabControl跳转到对应的位置
      this.$refs.scroll.scrollBack(-this.titleOffsetYs[index]);
    },
    scrollPostitionY(position) {// 滚动时穿过来位置参数
      
      const y = -position.y;      
      const length = this.titleOffsetYs.length; // 5 

      this.isGoBackShow = y > 1000; // 位置决定是否显示返回顶部GoBack

      for(let [index, i] of this.titleOffsetYs.entries()) {// 用循环赋值给tabControl的计数器
      
        if( (this.getCurrentIndex != index) && ( index < length - 1 && y >= this.titleOffsetYs[index] && y < this.titleOffsetYs[index + 1]) ) {

          this.getCurrentIndex = index; // 更新当前计数器
          this.$refs.nav.currentIndex = index;
          
        }
       
       
     } 
    },
    addClick() {// 添加购物车功能

      const goodInfo = new goodCart(this.data);

      // this.$store.dispatch('addCart', goodInfo).then(res => {
      //   console.log(res);
      // })
      // 与上面方法相同，采用mapActions映射过来，再使用Promise异步操作
      this.addCart(goodInfo).then(res => {
        
        this.$toast.show(res, 1500);
      })
      
      
      
    }

  },// methods结束
  destroyed() {
    this.$bus.$off('imgitemLoaded', this.imgItemLister);
    
  }// destoryed结束
}
</script>

<style scoped>
  .detail{
    position: relative;
    z-index: 9999999;
    background-color: #fff;
    height: 100vh;
  }
  /* detail导航栏 */
  .detail-nav{
    position: relative;
    z-index: 99999999;
    background-color: #fff;
  } 

  /* BScroll插件 */
  .content{
    height: calc(100% - 44px - 49px);
    overflow: hidden;
  }
</style>